<script setup lang="ts">
import { inject, computed } from "vue";
import type { FormDesignerComponents, FormItemPerm } from "../FormComponentMixin";
import { isReadonly } from "../FormItem";
const props = defineProps({
  type: {
    type: String,
    default: ""
  },
  mode: {
    type: String,
    default: "normal" //组件模式，free设计模式，normal 编辑模式, read 阅读模式，disable 禁用模式
  }
});

const _value = defineModel<number>();
const config = defineModel<FormDesignerComponents>("config");
const perm = inject<Array<FormItemPerm>>("perm");

const icon = computed(() => {
  const ico = config.value.props.icon;
  return [ico, ico, ico];
});

const color = computed(() => {
  const icoColor = config.value.props.color;
  return [icoColor, icoColor, icoColor];
});

const disabled = computed(() => {
  if (props.mode === "disable" && isReadonly(perm, config.value.code)) {
    return true;
  }
  return false;
});
</script>

<template>
  <el-rate
    v-model="_value"
    :allow-half="config.props.enableHalf"
    clearable
    :void-icon="config.props.icon"
    :max="config.props.max"
    :show-score="config.props.showScore"
    :text-color="config.props.color"
    :colors="color"
    :icons="icon"
    :disabled="disabled"
  />
</template>

<style scoped></style>
